<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<title>联系卖家</title>
		<link rel="stylesheet" type="text/css" href="css/联系卖家.css"/>
		<script type="text/javascript" src="js/vue.js"></script>		
	</head>
	<body>
		<div id="lhb">
			<div id="lhb_warp">
				<div id="lhb_topbox"> <!-- 聊天框大盒子 -->
					<div id="lhb_tbox1"> <!-- 连接盒子 -->
						<div id="lhb_babylj">
							<img src="img/sc_5_1.jpg" >
							<div id="lhb_bt">巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮</div>
							<p>单价：￥1200</p>
							<div id="fsbblj">发送宝贝链接</div>
						</div>
					</div>
					<div id="lhb_tbox2"> <!-- 对话盒子 -->
						<div id="lhb_xx1"> <!-- 消息1 -->
							<img src="img/sc_14_2.png" >
							<!-- <div><span>请问该商品从哪里发货？</span></div> -->
							<p>请问该商品从哪里发货？</p>
						</div>
						<!-- 链接发送成功 -->
						<!-- <div id="lhb_xx2"> 
							<img src="img/sc_14_2.png" >
							<div>
								<img src="img/sc_5_1.jpg" >
								<p>巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮</p>
							</div>
						</div> -->
					</div>
				</div>
				<div id="lhb_bottombox" > <!-- 底部变化高度大盒子 -->
					<div id="lhb_bottombox_warp"> <!-- 底部居中框 -->
						<div id="biaoqing"><img src="img/sc_14_2.png" ></div>
						<input type="text" id="srk" value="" />
						<div id="fasong">发送</div>
					</div>
					<div id="lhb_bq" class="lhb_bq">
						<!-- <div @click="open(inqq)"  id="qq" v-for="(item,inqq) in arrimg" :key="inqq"> <img id="qimg" :src="item.qqbq" ></div>						 -->
						<div @click="open(inqq)"  id="qq" v-for="(item,inqq) in ooigmg" :key="inqq"> <img id="qimg"  :src="item" ></div>						
						<!-- <div id="qq" class="i1"><img id="i1" src="img/1.png" ></div>						 -->
						<!-- <div id="qq" class="i2"><img id="i2" src="img/2.png" ></div>						 -->
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var lhb = new Vue({
			el:"#lhb",
			data:{
				op:0,
				ooigmg:[
					"img/1.png",
					"img/2.png",
					"img/3.png",
					"img/4.png",
					"img/5.png",
					"img/6.png",
					"img/7.png",
					"img/8.png",
					"img/28.png",
					"img/10.png",
					"img/11.png",
					"img/12.png",
					"img/13.png",
					"img/14.png",
					"img/15.png",
					"img/16.png",
					"img/17.png",
					"img/18.png",
					"img/19.png",
					"img/20.png",
					"img/21.png",
					"img/22.png",
					"img/23.png",
					"img/24.png",
					"img/25.png",
					"img/26.png",
					"img/27.png",
				],
				// arrimg:[
				// 	{qqbq:"img/1.png"},
				// 	{qqbq:"img/2.png"},
				// 	{qqbq:"img/3.png"},
				// 	{qqbq:"img/4.png"},
				// 	{qqbq:"img/5.png"},
				// 	{qqbq:"img/6.png"},
				// 	{qqbq:"img/7.png"},
				// 	{qqbq:"img/8.png"},
				// 	{qqbq:"img/9.png"},
				// 	{qqbq:"img/10.png"},
				// 	{qqbq:"img/11.png"},
				// 	{qqbq:"img/12.png"},
				// 	{qqbq:"img/13.png"},
				// 	{qqbq:"img/14.png"},
				// 	{qqbq:"img/15.png"},
				// 	{qqbq:"img/16.png"},
				// 	{qqbq:"img/17.png"},
				// 	{qqbq:"img/18.png"},
				// 	{qqbq:"img/19.png"},
				// 	{qqbq:"img/20.png"},
				// 	{qqbq:"img/21.png"},
				// 	{qqbq:"img/22.png"},
				// 	{qqbq:"img/23.png"},
				// 	{qqbq:"img/24.png"},
				// 	{qqbq:"img/25.png"},
				// 	{qqbq:"img/26.png"},
				// 	{qqbq:"img/27.png"},
				// ],
			},
			methods:{
				open(i){
					var div = document.querySelectorAll('.lhb_bq div');
					var qq = document.getElementById('qq');
					var box = document.getElementById('lhb_tbox2');
					this.op = i;
					// input.value = this.ooigmg[i];
					box.innerHTML+= '<div id="lhb_xx1"><img src="img/sc_14_2.png" ><div>'+ div[i].innerHTML +'</div>';
					console.log(div[i])
				},
				
	
			}
		})
	</script>
	
	<script type="text/javascript">
		var btn = document.getElementById('fasong');
		var input = document.getElementById('srk');
		var box = document.getElementById('lhb_tbox2'); //信息框box2
		
		btn.onclick = function(){
			var value = input.value;  //获取输入框的内容
						 // console.log(value)
			if(value == ''){
				alert('内容为空不能发送');
			}else{
				// if(onOff){
					
					box.innerHTML+= '<div id="lhb_xx1"><img src="img/sc_14_2.png" ><p>'+ value +'</p>';
					input.value = '';
				// }else{
				// 	box.innerHTML+= '<li class="right" ><img src="img/boy.png"><p>'+ value +'</p></li>';
				// }
				// box.scrollTop=box.scrollHeight;
				
			}
		}
		
		var biaoqing = document.getElementById('biaoqing');
		var lhb_bq = document.getElementById('lhb_bq');
		var warp = document.getElementById('lhb_bottombox');
		var topbox = document.getElementById('lhb_topbox');
		
		// console.log(lhb_bq)
		// 表情开关
		var inoff = true;
		biaoqing.onclick=function(){
			if(inoff){
				// lhb_bq.style.display=block;
				warp.style.height = 355+'px';
				topbox.style.height = 68+'%';
				// box.style.height = 48+'%';
			}else{
				// lhb_bq.style.display=none;
				warp.style.height = 120+'px';
				topbox.style.height = 90+'%';
				// box.style.height = 70+'%';
			}
			inoff = !inoff;
			
		}
		// 发送宝贝链接
		var fsbblj = document.getElementById('fsbblj');
		var lhb_tbox1 = document.getElementById('lhb_tbox1');
		
		fsbblj.onclick=function(){
			// box.style.height = 1000+'px';
			box.innerHTML+= '<div id="lhb_xx2"><img src="img/sc_14_2.png" ><div><img src="img/sc_5_1.jpg" ><p>'+ "巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮" +'</p></div></div>';
			lhb_tbox1.style.display='none';
			
		}
		// 表情循环生成
		var qq = document.getElementById('qq');
		var bqbox = document.getElementById('lhb_bq');
		
	</script>
	
</html>
